<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/slider.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name1: {
                        label: '属性',
                        widget: 'slider',
                        ui: {
                            min: -50,
                            max: 50,
                            step: 10,
                            showStops: true,
                            range: true,
                            marks: [-50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50].reduce((t, e) => {
                                t[e] = `${e}℃`
                                return t
                            }, {})
                        }
                    },
                    name2: {
                        label: '竖向',
                        widget: 'slider',
                        ui: {
                            vertical: true,
                            height: '200px'
                        }
                    },
                    name3: {
                        label: '输入框',
                        widget: 'slider',
                        ui: {
                            showInput: true
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                col: {
                    span: 12
                }
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
